<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>兼职接任务</title>
    <link rel="stylesheet" href="../../css/common/base.css">
    <link rel="stylesheet" href="../../css/common/header-footer.css">
    <link rel="stylesheet" href="../../css/wj/jierenwu-E1.css">
    <link rel="stylesheet" href="../../css/wj/zhifufangshi-E3.css">
    <script src="../../js/flexible.js"></script>
    <script src="../../js/jquery-1.12.3.min.js"></script>
</head>
<body>
    <header>
        <div class="header_top">
            <img src="../../img/信号组.png" alt="">
            <span class="header_time">上午 9:51</span>
            <span class="ht_right">
                <img src="../../img/蓝牙图标.png" alt="">
                <img src="../../img/电量百分比.png" alt="">
                <img src="../../img/电量图标.png" alt="">
            </span>
        </div>
        <div class="header_bottom">
            <div class="hb_left">
                <img src="../../img/返回按钮-1.png" alt="" id="return">
                <!-- 需要更改title文字 -->
                <span class="title">&nbsp;兼职</span>
            </div>
            <div class="hb_right">
                <img src="../../img/组 35.png" alt="">
            </div>
        </div>
    </header>
    <!-- --------------------------------主体部分----------------------------------------------- -->
    <div class="kong"></div>
    <section>
        <ul>
            <li>
                <div class="qujian_top">
                    <div class="qt_left">
                        <img src="../../img/组 67.png" alt="">
                        <span>担保</span>
                    </div>
                    <div class="qt_middle">
                        <span>
                            <span>代取件</span>
                            <span>酬金3.00元</span>
                        </span>
                        <span>请在规定时间内将物品送至指定地点</span>
                    </div>
                    <span  id="lingqurenwu">领取任务</span>
                </div>
                <div class="qujian_bottom">
                    <span>明日18:00前</span>
                    <span>送至</span>
                    <span>A宿舍306</span>
                </div>
            </li>
            <span>更多任务</span>
            <li>
                <div class="qujian_top">
                    <div class="qt_left noword">
                        <img src="../../img/组 67.png" alt="">
                        <!-- <span>担保</span> -->
                    </div>
                    <div class="qt_middle">
                        <span>
                            <span>拿外卖</span>
                            <span>酬金3.00元</span>
                        </span>
                        <span>请在规定时间内将物品送至指定地点</span>
                    </div>
                    <span class="jiedan_feidanbao" id="lingqurenwu2">领取任务</span>
                </div>
                <div class="qujian_bottom">
                    <span>今日12:00前</span>
                    <span>送至</span>
                    <span>A宿舍306</span>
                </div>
            </li>
        </ul>
    </section>
    <!-- ---------------------------以下是出现遮罩层+弹窗的点击事件------------------------------ -->
    <div class="zhezhaoceng" id="id2"></div>
    <div class="tanchuang" id="id3" style="display: none;">
        <div>
            <img src="../../img/组 88.png" alt="">
            <span>此交易需缴纳保证金，若未如期完成，平台将扣除保证金</span>
        </div>
        <div>
            <span id="give_up">放弃任务</span>
            <span id="jiaoqian">缴纳保证金</span>
        </div>
    </div>
     <!-- ---------------------------以下是支付页面新增的部分，合并在这里写------------------------------ -->
    <div class="zhifu" id="id4" style="display: none;">
        <div>
            <div>
                <img src="../../img/微信.png" alt="" height="33" width="33" >
                <span id="weixin">微信支付</span>
            </div>
            <img id="dianweixin1"src="../../img/勾选.png" alt="" height="14.5" width="14.5">
            <img id="dianweixin2" src="../../img/椭圆 40.png" alt="" height="14.5" width="14.5" style="display: none;">

        </div>
        <div>
            <div>
                <img src="../../img/支付宝.png" alt="" height="33" width="33" >
                <span id="zhifubao">支付宝</span>
            </div>
            <img id="dianzhifubao1" src="../../img/椭圆 40.png" alt="" height="14.5" width="14.5">
            <img id="dianzhifubao2" src="../../img/勾选.png" alt="" height="14.5" width="14.5" style="display: none;">

        </div>
    </div>
</body>
<script>
    // 先获取到变量，也就是获取到事件关联的目标，有几个就几个var
        var  lingqurenwu = document.getElementById("lingqurenwu")
        var id2 = document.getElementById("id2")
        var id3 = document.getElementById("id3")
        var id4 = document.getElementById("id4")
        var id5 = document.getElementById("id5")
    // 给点击的目标添加点击后的功能
        lingqurenwu.addEventListener("click", function(){
            id2.style.display = "flex"
            id3.style.display = "flex"
        })
        lingqurenwu.addEventListener("click", function(){
            id2.style.display = "flex"
            id3.style.display = "flex"
        })
    // 因为遮罩层挡住了不能点，所以在新的点击事件
        var  give_up = document.getElementById("give_up")
        give_up.addEventListener("click",function(){
            id2.style.display = "none"
            id3.style.display = "none"
        })
        // ------------------------新增的支付的点击事件----------------------------------
        var jiaoqian = document.getElementById("jiaoqian")
            jiaoqian.addEventListener("click",function(){
                // id4.style.display = "flex"
                id2.style.display = "flex"
                id3.style.display = "none"
                id4.style.display = "flex"
            }
            )           
        var  id2 = document.getElementById("id2")
            id2.addEventListener("click",function(){
            id2.style.display = "none"
            id3.style.display = "none"
            id4.style.display = "none"
        })
        // ------------------------新增的支付方式切换的点击事件----------------------------------
        var  dianweixin1 = document.getElementById("dianweixin1")
        var  dianweixin2 = document.getElementById("dianweixin2")
        var  dianzhifubao1 = document.getElementById("dianzhifubao1")
        var  dianzhifubao2 = document.getElementById("dianzhifubao2")
        dianweixin1.addEventListener("click",function(){
            dianweixin1.style.display = "none"
            dianweixin2.style.display = "flex"
        })
        dianweixin2.addEventListener("click",function(){
            dianweixin2.style.display = "none"
            dianweixin1.style.display = "flex"
        })
        dianzhifubao1.addEventListener("click",function(){
            dianzhifubao1.style.display = "none"
            dianzhifubao2.style.display = "flex"
        })
        dianzhifubao2.addEventListener("click",function(){
            dianzhifubao2.style.display = "none"
            dianzhifubao1.style.display = "flex"
        })
    </script>
    <script>
        // $(document).ready(function(){
	    //   $('#id4').click(function(){
        //     window.location.href="jiedan.html";
        //   });
        // });
        $(document).ready(function(){
	      $('#weixin').click(function(){
            window.location.href="jiedan.html";
          });
        });
        $(document).ready(function(){
	      $('#zhifubao').click(function(){
            window.location.href="jiedan.html";
          });
        });
        $(document).ready(function(){
	      $('.jiedan_feidanbao').click(function(){
            window.location.href="jiedan.html";
          });
        });
        $(document).ready(function(){
	      $('#return').click(function(){
            window.location.href="../trm/shouye.html";
          });
        });
    </script>
</html>